<!--
 * @name: 
 * @Author: JiaYing
 * @LastEditors: JiaYing
 * @Date: 2022-08-24 00:40:46
 * @LastEditTime: 2022-08-24 15:01:34
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件委托</title>
  </head>
  <body>
    <div>
      <style>
        .wapper {
          width: 400px;
          height: 200px;
          border-radius: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
        .wapper ul {
          height: 30px;
          line-height: 30px;
          list-style: none;
          display: flex;
          margin: 0;
          padding: 0;
        }
        .wapper ul li {
          width: 80px;
          text-align: center;
          border-left: 1px solid #ddd;
          background-color: rgb(249, 249, 249);
          box-sizing: border-box;
          cursor: pointer;
        }
        .wapper ul li.active {
          border-bottom: 1px solid rgb(149, 223, 198);
          background-color: rgb(149, 255, 158);
        }
        .wapper .view {
          flex-grow: 1;
          display: flex;
          background-color: #eee;
          flex-direction: column;
        }
        .wapper .view .box {
          height: 100%;
          flex-grow: 1;
          flex-shrink: 0;
          padding: 10px;
          box-sizing: border-box;
          display: none;
        }
        .wapper .view .box.active {
          display: block;
        }
      </style>
      <div class="wapper" id="tab">
        <ul>
          <li class="active" data-label="A">A</li>
          <li data-label="B">B</li>
          <li data-label="C">C</li>
        </ul>
        <div class="view">
          <div class="box active" data-label="A">1</div>
          <div class="box" data-label="B">2</div>
          <div class="box" data-label="C">3</div>
        </div>
      </div>
    </div>

    <p></p>

    <div class="table-wapper">
      <style>
        .table-wapper tbody input {
          width: 100%;
          height: 100%;
          padding: 0;
          border: unset;
          outline: none;
          font-size: 16px;
        }
      </style>
      <table border>
        <colgroup>
          <col style="width: 110px" />
          <col style="width: 110px" />
          <col style="width: 110px" />
        </colgroup>
        <thead>
          <th>username</th>
          <th>userage</th>
          <th>useraddress</th>
        </thead>
        <tbody>
          <tr>
            <td>tony</td>
            <td>28</td>
            <td>aaaa</td>
          </tr>
          <tr>
            <td>tony</td>
            <td>28</td>
            <td>aaaa</td>
          </tr>
          <tr>
            <td>tony</td>
            <td>28</td>
            <td>aaaa</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

<script>
  (function () {
    const tab = document.querySelector("#tab");
    const ul = tab.querySelector("ul");
    const boxs = tab.querySelectorAll(".view > .box");

    function createListener(el, eventname, selectors, fn) {
      const cb = function (e) {
        const target = e.target || null;
        if (!target) return;
        if (target.matches(selectors) && fn instanceof Function)
          fn.call(this, e);
      };
      const remove = function () {
        el.removeEventListener(eventname, cb);
      };
      el.addEventListener(eventname, cb);
      return {
        remove,
      };
    }

    createListener(ul, "click", "li", function (e) {
      const target = e.target;
      if (target.classList.contains("active")) return;
      [].slice.call(target.parentNode.children).forEach(function (node, index) {
        node.classList.remove("active");
        boxs[index].classList.remove("active");
        if (boxs[index].dataset.label === target.dataset.label) {
          boxs[index].classList.add("active");
        }
      });
      target.classList.add("active");
    });
  })();
</script>

<script>
  (function () {
    const wapper = document.querySelector(".table-wapper");
    const table = wapper.querySelector("table");
    const tbody = table.querySelector("tbody");
    const input = document.createElement("input");
    tbody.addEventListener("click", function (e) {
      const target = e.target;
      if (target.tagName !== "TD") return;
      const text = target.innerText;
      const newInput = input.cloneNode();
      newInput.value = text;
      target.innerHTML = "";
      target.append(newInput);
      newInput.addEventListener("blur", function () {
        const text = newInput.value;
        newInput.remove();
        target.innerText = text;
      });
      setTimeout(() => {
        newInput.focus();
      });
    });
  })();
</script>
